
import dayjs from 'dayjs';
import { memo, useEffect, useState } from 'react';
import { Modal } from 'antd';
import type { FormProps } from 'antd';
import { Button, Select, Form, Input, Checkbox, DatePicker } from 'antd';
const { Option } = Select;
const { RangePicker } = DatePicker;
type FieldType = {
  name?: string;
  mobile?: string;
  contry?: string;
  hobby: string[];
  birthday: string
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {

  // let data={...values,birthday: dayjs(values.birthday, 'YYYY-MM-DD')}
  console.log('Success222222222222:', values);
  //  console.log('Success222222222222:', values.birthday.format('YYYY-MM-DD'));

  // const [startDate, endDate] = values.dateRange;
  //   const startDateStr = startDate.format('YYYY-MM-DD');
  //   const endDateStr = endDate.format('YYYY-MM-DD');
  //   console.log(`Start Date: ${startDateStr}, End Date: ${endDateStr}`);

};

// const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
//   console.log('Failed:', errorInfo);
// };

interface IProps {
  open: boolean;
  close: () => void;
}

const Edit = memo((props: IProps) => {

  // const [userInfo,setUserInfo]=useState<FieldType>({name:"",mobile:""});

  const [form] = Form.useForm();
  const [contryList, setcontryList] = useState<string[]>([]);

  const getData = () => {
    setTimeout(() => {

      // setUserInfo({name:"张三",mobile:"135"});


       setcontryList(["中国", "美国"]);

       //表单回显

      form.setFieldsValue({
        name: "张三", mobile: "135", contry: "美国", hobby: ["旅游"],
        birthday: "2024-09-10",
        dateRange: ["2024-10-10", "2024-11-11"]

      });






    }, 1000)
  }
  const handleOk = () => {

    form.submit();

    // let data=form.getFieldsValue();
    // console.log(88888888,data);


  }

  useEffect(() => {

    getData();


  }, [])


  console.log('--子组件函数再次执行了--');
  return <Modal
    title="添加费用"
    open={props.open}
    onCancel={props.close}
    onOk={handleOk}
  >

    {/* {userInfo.name}  {userInfo.mobile} */}
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      // initialValues={userInfo}
      onFinish={onFinish}
      // onFinishFailed={onFinishFailed}
      autoComplete="off"
      form={form}
    >
      <Form.Item<FieldType>
        label="姓名"
        name="name"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="电话"
        name="mobile"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType> label="爱好" name="hobby">

        <Checkbox.Group>

          <Checkbox value="旅游">
            旅游
          </Checkbox>
          <Checkbox value="爬山">
            爬山
          </Checkbox>
        </Checkbox.Group>

      </Form.Item>

      <Form.Item label="时间范围" name="dateRange"
        getValueFromEvent={(...[, dateString]) => dateString}
        getValueProps={(value) => ({ value: value ? [dayjs(value[0], 'YYYY-MM-DD'), dayjs(value[1], 'YYYY-MM-DD')] : undefined })}>
        <RangePicker format="YYYY-MM-DD" />

      </Form.Item>


      <Form.Item<FieldType> label="生日" name="birthday"
        getValueFromEvent={(...[, dateString]) => dateString}
        getValueProps={(value) => ({ value: value ? dayjs(value, 'YYYY-MM-DD') : undefined })}>
        <DatePicker format="YYYY-MM-DD" />

      </Form.Item>


      <Form.Item<FieldType>
        label="国籍"
        name="contry"
        rules={[{ required: true, message: '请选择国籍' }]}
      >

        <Select
          placeholder="选择国籍"
          allowClear
        >
          {
            contryList.map((item: string) => (
              <Option key={item} value={item}>{item}</Option>
            ))
          }

        </Select>

      </Form.Item>



      {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item> */}
    </Form>


  </Modal>;
});

export default Edit;
